M

MLOG

Türkçe

State yönetimi için React Context ve Props'un kapsamlı karşılaştırması. Performans, karmaşıklık ve küresel uygulama geliştirme için en iyi pratikleri ele alır.

React Context ve Props Karşılaştırması: Doğru Durum Dağıtım Stratejisini Seçmek

Sürekli gelişen ön uç geliştirme (front-end development) dünyasında, sürdürülebilir, ölçeklenebilir ve performanslı React uygulamaları oluşturmak için doğru durum yönetimi (state management) stratejisini seçmek çok önemlidir. Durumu dağıtmak için iki temel mekanizma Props ve React Context API'dir. Bu makale, projeleriniz için bilinçli kararlar vermenize yardımcı olmak amacıyla güçlü ve zayıf yönlerini ve pratik uygulamalarını analiz ederek kapsamlı bir karşılaştırma sunmaktadır.

Props'u Anlamak: Bileşen İletişiminin Temeli

Props (properties kelimesinin kısaltması), React'te veriyi ebeveyn bileşenlerden (parent components) alt bileşenlere (child components) aktarmanın birincil yoludur. Bu, verinin bileşen ağacında aşağı doğru hareket ettiği anlamına gelen tek yönlü bir veri akışıdır. Props; string, number, boolean, dizi, nesne ve hatta fonksiyonlar dahil olmak üzere herhangi bir JavaScript veri türü olabilir.

Props'un Faydaları:

Props'un Dezavantajları: Prop Drilling

Yalnızca props'a güvenmenin ana dezavantajı "prop drilling" olarak bilinen sorundur. Bu durum, derinlemesine iç içe geçmiş bir bileşenin, uzaktaki bir üst bileşenden gelen veriye erişmesi gerektiğinde ortaya çıkar. Verinin, o veriyi doğrudan kullanmasalar bile ara bileşenler aracılığıyla aşağıya doğru aktarılması gerekir. Bu şunlara yol açabilir:

Prop Drilling Örneği:

Bir e-ticaret uygulamasında, kullanıcının kimlik doğrulama token'ının bir ürün detayları bölümü gibi derinlemesine iç içe geçmiş bir bileşende gerekli olduğunu hayal edin. Token'ı <App>, <Layout>, <ProductPage> ve son olarak <ProductDetails> gibi bileşenler aracılığıyla, ara bileşenler token'ı kendileri kullanmasa bile aktarmanız gerekebilir.


function App() {
  const authToken = "some-auth-token";
  return <Layout authToken={authToken} />;
}

function Layout({ authToken }) {
  return <ProductPage authToken={authToken} />;
}

function ProductPage({ authToken }) {
  return <ProductDetails authToken={authToken} />;
}

function ProductDetails({ authToken }) {
  // authToken'u burada kullan
  return <div>Product Details</div>;
}

React Context'e Giriş: Bileşenler Arasında Durum Paylaşımı

React Context API, durum, fonksiyonlar veya hatta stil bilgileri gibi değerleri, her seviyede manuel olarak props geçmek zorunda kalmadan bir React bileşen ağacıyla paylaşmanın bir yolunu sunar. Prop drilling sorununu çözmek için tasarlanmıştır, bu da global veya uygulama genelindeki verilere erişimi ve yönetimi kolaylaştırır.

React Context Nasıl Çalışır:

  1. Bir Context Oluşturun: Yeni bir context nesnesi oluşturmak için React.createContext() kullanın.
  2. Provider (Sağlayıcı): Bileşen ağacınızın bir bölümünü <Context.Provider> ile sarmalayın. Bu, o alt ağaçtaki bileşenlerin context değerine erişmesini sağlar. Provider'ın value prop'u, tüketicilere hangi verinin sunulacağını belirler.
  3. Consumer (Tüketici): Bir bileşen içinde context değerine erişmek için <Context.Consumer> veya useContext hook'unu kullanın.

React Context'in Faydaları:

React Context'in Dezavantajları:

React Context Kullanım Örneği:

Kimlik doğrulama token'ı örneğine geri dönelim. Context kullanarak, token'ı uygulamanın en üst seviyesinde sağlayabilir ve ara bileşenlerden geçirmeden doğrudan <ProductDetails> bileşeninde erişebiliriz.


import React, { createContext, useContext } from 'react';

// 1. Bir Context Oluştur
const AuthContext = createContext(null);

function App() {
  const authToken = "some-auth-token";
  return (
    // 2. Context değerini sağla
    <AuthContext.Provider value={authToken}>
      <Layout />
    </AuthContext.Provider>
  );
}

function Layout({ children }) {
  return <ProductPage />;
}

function ProductPage({ children }) {
  return <ProductDetails />;
}

function ProductDetails() {
  // 3. Context değerini tüket
  const authToken = useContext(AuthContext);
  // authToken'u burada kullan
  return <div>Product Details - Token: {authToken}</div>;
}

Context ve Props: Detaylı Bir Karşılaştırma

İşte Context ve Props arasındaki temel farkları özetleyen bir tablo:

Özellik Props Context
Veri Akışı Tek Yönlü (Ebeveynden Çocuğa) Global (Provider içindeki tüm bileşenler tarafından erişilebilir)
Prop Drilling Prop drilling'e eğilimlidir Prop drilling'i ortadan kaldırır
Bileşen Yeniden Kullanılabilirliği Yüksek Potansiyel Olarak Daha Düşük (context bağımlılığı nedeniyle)
Performans Genellikle daha iyi (sadece güncellenmiş props alan bileşenler yeniden render olur) Potansiyel olarak daha kötü (context değeri değiştiğinde tüm tüketiciler yeniden render olur)
Karmaşıklık Daha Düşük Daha Yüksek (Context API'nin anlaşılmasını gerektirir)
Test Edilebilirlik Daha Kolay (testlerde doğrudan props geçirilebilir) Daha karmaşık (context'in mock'lanmasını gerektirir)

Doğru Stratejiyi Seçmek: Pratik Değerlendirmeler

Context mi yoksa Props mu kullanılacağı kararı, uygulamanızın özel ihtiyaçlarına bağlıdır. İşte doğru stratejiyi seçmenize yardımcı olacak bazı yönergeler:

Ne Zaman Props Kullanılmalı:

Ne Zaman Context Kullanılmalı:

React Context Kullanımı İçin En İyi Pratikler:

Durum Yönetimi İçin Küresel Değerlendirmeler

Küresel bir kitle için React uygulamaları geliştirirken, durum yönetiminin uluslararasılaştırma (i18n) ve yerelleştirme (l10n) ile nasıl etkileşime girdiğini göz önünde bulundurmak esastır. İşte akılda tutulması gereken bazı özel noktalar:

Context ile Dil Tercihlerini Yönetme Örneği:


import React, { createContext, useContext, useState } from 'react';

const LanguageContext = createContext({
  locale: 'en',
  setLocale: () => {},
});

function LanguageProvider({ children }) {
  const [locale, setLocale] = useState('en');

  const value = {
    locale,
    setLocale,
  };

  return (
    <LanguageContext.Provider value={value}>
      {children}
    </LanguageContext.Provider>
  );
}

function useLanguage() {
  return useContext(LanguageContext);
}

function MyComponent() {
  const { locale, setLocale } = useLanguage();

  return (
    <div>
      <p>Mevcut Yerel Ayar: {locale}</p>
      <button onClick={() => setLocale('en')}>İngilizce</button>
      <button onClick={() => setLocale('tr')}>Türkçe</button>
    </div>
  );
}

function App() {
  return (
    <LanguageProvider>
      <MyComponent />
    </LanguageProvider>
  );
}

İleri Düzey Durum Yönetim Kütüphaneleri: Context'in Ötesi

React Context, uygulama durumunu yönetmek için değerli bir araç olsa da, daha karmaşık uygulamalar genellikle özel durum yönetim kütüphanelerini kullanmaktan fayda görür. Bu kütüphaneler aşağıdaki gibi gelişmiş özellikler sunar:

React için bazı popüler durum yönetim kütüphaneleri şunlardır:

Doğru durum yönetim kütüphanesini seçmek, uygulamanızın özel ihtiyaçlarına bağlıdır. Kararınızı verirken durumunuzun karmaşıklığını, ekibinizin büyüklüğünü ve performans gereksinimlerinizi göz önünde bulundurun.

Sonuç: Basitlik ve Ölçeklenebilirliği Dengelemek

React Context ve Props, React uygulamalarında durumu yönetmek için temel araçlardır. Props, net ve açık bir veri akışı sağlarken, Context prop drilling'i ortadan kaldırır ve global durumun yönetimini basitleştirir. Her yaklaşımın güçlü ve zayıf yönlerini anlayarak ve en iyi pratikleri takip ederek, projeleriniz için doğru stratejiyi seçebilir ve küresel bir kitle için sürdürülebilir, ölçeklenebilir ve performanslı React uygulamaları oluşturabilirsiniz. Durum yönetimi kararlarınızı verirken uluslararasılaştırma ve yerelleştirme üzerindeki etkiyi göz önünde bulundurmayı unutmayın ve uygulamanız daha karmaşık hale geldiğinde ileri düzey durum yönetim kütüphanelerini keşfetmekten çekinmeyin.